<template>
    <div class="setting-config">
        <el-form-item label="时间戳字段">
            <el-input type="text" v-model="optionModel.timeField"></el-input>
        </el-form-item>
        <el-form-item label="展示内容字段">
            <el-input type="text" v-model="optionModel.contentField"></el-input>
        </el-form-item>

        <el-collapse value="1">
            <el-collapse-item name="1" title="数据源(我是第三方系统配置的面板)">
                <!--数据字典-->
                <el-form-item label="数据来源类型">
                    <el-select v-model="optionModel.selectType" @change="changeSelectType">
                    <el-option v-for="(item,index) in selectTypeOptions" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <div v-if="optionModel.selectType=='dataSource'">
                    <el-form-item label="初始化加载">
                        <el-switch v-model="optionModel.initdata"></el-switch>
                    </el-form-item>
                    <el-form-item label="请求方式">
                        <el-select v-model="optionModel.methodType" clearable>
                            <el-option label="GET" value="get"></el-option>
                            <el-option label="POST" value="post"></el-option>
                            <el-option label="PUT" value="put"></el-option>
                            <el-option label="DELETE" value="delete"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="请求地址">
                        <el-input type="text" v-model="optionModel.requestUrl"></el-input>
                    </el-form-item>
                    <el-form-item label="请求头">
                        <el-input placeholder="点击按钮配置" type="text" class="input-with-select" disabled>
                            <el-button slot="append" icon="el-icon-setting" @click="headerFlag=true"></el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="请求参数">
                        <el-input placeholder="点击按钮配置" type="text" class="input-with-select" disabled>
                        <el-button slot="append" icon="el-icon-setting" @click="requestFlag=true"></el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="请求响应">
                        <el-input placeholder="点击按钮配置" type="text" class="input-with-select" disabled>
                        <el-button slot="append" icon="el-icon-setting" @click="returnFlag=true"></el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="响应数据">
                        <span slot="label">响应数据
                        <el-tooltip effect="light" content="填写响应字段，如:data" placement="top"> <i class="el-icon-info"></i></el-tooltip>
                        </span>
                        <el-input type="text" v-model="optionModel.dataField"></el-input>
                    </el-form-item>
                </div>
                <!--自定义-->
                <el-form-item label="自定义值" v-if="optionModel.selectType=='custom'">
                    <span slot="label">自定义值
                        <el-tooltip effect="light" content="配置自定义集合" placement="top"> <i class="el-icon-info"></i></el-tooltip>
                    </span>
                    <el-input placeholder="点击按钮配置" type="text" class="input-with-select" disabled>
                        <el-button slot="append" icon="el-icon-setting" @click="customFlag=true"></el-button>
                    </el-input>
                </el-form-item>
            </el-collapse-item>
        </el-collapse>

        <el-collapse value="1">
            <el-collapse-item name="1" title="开关配置(我是第三方系统配置的面板)">
                <el-form-item label="启用倒序">
                    <el-switch v-model="optionModel.reverse"></el-switch>
                </el-form-item>
            </el-collapse-item>
        </el-collapse>
        <!--自定义值弹窗-->
        <vxe-modal v-model="customFlag" width="80%" show-footer>
            <template #title>
                <span style="color:#000">自定义值</span>
            </template>
            <template #default>
                <code-editor v-if="customFlag" :mode="'javascript'" :readonly="false" v-model="optionModel.optionItems" :designer="designer">
                    <template slot="title">
                        [{"label":"K","children":"[]"}]
                    </template>
                </code-editor>
            </template>
        </vxe-modal>
         <!--请求参数弹窗-->
         <vxe-modal v-if="requestFlag" v-model="requestFlag" width="80%" show-footer>
            <template #title>
                <span style="color:#000">请求参数弹窗</span>
            </template>
            <template #default>
                <code-editor v-if="requestFlag" :mode="'javascript'" :readonly="false" v-model="optionModel.requestScript" :designer="designer">
                    <template slot="title">
                        return {pageNum:1,pageSize:20}
                    </template>
                </code-editor>
            </template>
        </vxe-modal>
        <!--请求响应弹窗-->
        <vxe-modal v-if="returnFlag" v-model="returnFlag" width="80%" show-footer>
            <template #title>
                <span style="color:#000">请求响应弹窗</span>
            </template>
            <template #default>
                <code-editor v-if="returnFlag" :mode="'javascript'" :readonly="false" v-model="optionModel.responseScript" :designer="designer">
                    <template slot="title">
                        function(_this, response)
                    </template>
                </code-editor>
            </template>
        </vxe-modal>

        <!--请求头弹窗-->
        <vxe-modal v-if="headerFlag" v-model="headerFlag" width="80%" show-footer>
            <template #title>
                <span style="color:#000">请求头弹窗</span>
            </template>
            <template #default>
                <code-editor v-if="headerFlag" :mode="'javascript'" :readonly="false" v-model="optionModel.headers" :designer="designer">
                    <template slot="title">
                        return {}
                    </template>
                </code-editor>
            </template>
        </vxe-modal>
    </div>
</template>

<script>
import {CodeEditor} from '@/../lib/VFormDesigner.umd.min.js'
export default {
    name: "timeline1V2-editor",
    components: {
      CodeEditor,
    },
    props: {
        designer: Object,
        selectedWidget: Object,
        optionModel: Object
    },
    create(){
    },
    mounted(){
        this.optionModel.timeField = "timestamp"
        this.optionModel.contentField = "content"
    },
    data(){
        return{
            //自定义下拉
            customFlag:false,
            headerFlag:false,
            requestFlag:false,
            returnFlag:false,
            selectTypeOptions: [
                {label: '自定义', value: 'custom'},
                {label: '远程数据', value: 'dataSource'}
            ],
            sortable1:{},
        }
    },
    methods:{
        changeSelectType(val){
            if(val=='custom'){
                this.optionModel.timeField = 'timestamp';
                this.optionModel.contentField = 'content';
            }else {
                this.optionModel.timeField = 'createTime';
                this.optionModel.contentField = 'remark';
            }
        },
    }
}
</script>

<style lang="scss" scoped>
</style>
